<template>
  <div>
    <div>
      <el-form :inline="true" :model="filterQuery" class="demo-form-inline">
        <el-form-item label="作业公司">
          <el-select
            v-model="filterQuery.cementCompany"
            placeholder="请选择公司"
            clearable
            filterable
          >
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作业时间">
          <el-date-picker
            v-model="datepicker"
            :picker-options="pickerOptions"
            type="daterange"
            align="right"
            unlink-panels
            clearable
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAnalysis()">分析</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row style="margin-bottom: 40px">
      <el-col id="casingChart" style="height: 350px" />
    </el-row>
    <el-row :gutter="50">
      <el-col :span="12" id="wellTypeChart" style="height: 350px" />
      <el-col :span="12" id="wellSpacingChart" style="height: 350px"/>
    </el-row>
  </div>
</template>
<script>
import { GetCompany, GetCompanyAndTime } from '@/api/module/workNumAnalysis'
import echarts from 'echarts'
require('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')
require('echarts/lib/chart/line')
const DefaultQuery = {
  companyCode: null,
  work_date: '',
  report_date: '',
}
export default {
  data() {
    return {
      cementCompany: '',
      filterQuery: {},
      options: [],
      formInline: '',
      datepicker: [],
      pickerOptions: {},
      datapicker: '',
      searchModel: {
        wellType: '',
        wellCategory: '',
      },
    }
  },
  mounted() {
    this.getCompany()
    this.loadFilterParams()
    this.handleAnalysis()
  },
  methods: {
    handleGetCompanyAnalysis() {
      // this.loading = true;
      GetCompanyAndTime(this.filterQuery).then((res) => {
        // this.loading = false;
        console.log(res.data)
        if (res.data.code === 200) {
          const {
            caseSize,
            caseSizeCount,
            wellSpacing,
            wellSpacingCount,
            wellType,
            wellTypeCount,
          } = res.data
          this.drawWellTypeChart(wellType, wellTypeCount)
          this.drawWellSpacingChart(wellSpacing, wellSpacingCount)
          this.drawCasingChart(caseSize, caseSizeCount)
        }
      })
    },
    // 分析
    handleAnalysis() {
      this.checkFilterParams()
      this.handleGetCompanyAnalysis()
    },
    checkFilterParams() {
      //datepicker range 绑定的数据是数组,需要拆成后端识别的2个参数
      if (this.datepicker && this.datepicker.length === 2) {
        this.filterQuery.work_date = this.datepicker[0]
        this.filterQuery.report_date = this.datepicker[1]
      } else {
        this.filterQuery.work_date = ''
        this.filterQuery.report_date = ''
      }
    },
    loadFilterParams() {
      //整理筛选条件
      this.filterQuery = { ...DefaultQuery, ...this.$route.query }
      //从query中取到的参数是string的,要转成element要求的number
      this.filterQuery = { ...this.filterQuery }
      //填充datepicker range组件的内容
      if (this.filterQuery.work_date && this.filterQuery.report_date) {
        this.datepicker = [
          this.filterQuery.work_date,
          this.filterQuery.report_date,
        ]
      }
    },
    // 获取公司名称
    getCompany() {
      GetCompany()
        .then((res) => {
          console.log('ss', res)
          this.options = res.data.data
        })
        .catch(() => {})
    },
    drawCasingChart(xAxisData, yAxisData) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('casingChart'))
      // 绘制图表
      myChart.setOption({
        color: ['#3398DB'],
        title: { text: '套管',left:'2%'  },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            magicType: {show: true, type: ['line', 'bar']},
            saveAsImage: { show: true },
          },
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
        },
        series: [
          {
            name: '数量',
            data: yAxisData,
            type: 'bar',
            barWidth: '50px',
          },
        ],
      })
    },
    drawWellTypeChart(xAxisData, yAxisData) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('wellTypeChart'))
      // 绘制图表
      myChart.setOption({
        color: ['#3398DB'],
        title: { text: '井型',left:'4%'  },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            magicType: {show: true, type: ['line', 'bar']},
            saveAsImage: { show: true },
          },
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
        },
        series: [
          {
            name: '数量',
            data: yAxisData,
            type: 'bar',
            barWidth: '50px',
          },
        ],
      })
    },
    drawWellSpacingChart(xAxisData, yAxisData) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('wellSpacingChart'))
      // 绘制图表
      myChart.setOption({
        color: ['#3398DB'],
        title: { text: '井别',left:'4%' },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            magicType: {show: true, type: ['line', 'bar']},
            saveAsImage: { show: true },
          },
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
        },
        series: [
          {
            name: '数量',
            data: yAxisData,
            type: 'bar',
            barWidth: '50px',
          },
        ],
      })
    },
  },
}
</script>
